<template>
  <h1>EL-日期时间选择器组件</h1>
  <!-- type="date": 纯日期 年月日 无时分秒显示 -->
  <!-- format="": 转换日期显示格式 -->
  <!--
       @change="": 时间绑定 数据发生改变时 会进行此绑定事件的事件逻辑
                   如下表示 只要用户改变日期 则会在控制台打印该日期
  -->
  <!-- value-format="": 数据转化 自定义前后端传输时的数据内容 -->
  <el-date-picker
      type="date"
      v-model="value1"
      format="YYYY-MM-DD"
      value-format="YYYY-MM-DD"
      @change="console.log(value1)"
  />
  <hr>
  <!-- type="datetimerange" 从...`开始`到...`结束` -->
  <el-date-picker
      type="datetimerange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      v-model="value2"
      format="YYYY-MM-DD HH:mm:ss"
      value-format="YYYY-MM-DD HH:mm:ss"
      @change="console.log(value2)"
  />
</template>

<script setup>
import {ref} from "vue";

const value1 = ref('');
// 因为要保存开始时间与结束时间同时存储,所以要使用数组接收
const value2 = ref([]);
</script>

<style scoped>

</style>